<template>
  <div class="register">
    <div class="title">新用户注册</div>
    <ul class="content">
      <li class="line">
        <span class="text-title">用户姓名：</span>
        <input
          type="text"
          placeholder="请输入姓名"
          class="input"
          v-model="user.truename"
        />
      </li>
      <li class="line">
        <span class="text-title">用户身份证号码：</span>
        <input
          type="text"
          placeholder="请输入用户身份证号码"
          class="input"
          v-model="user.idcard"
        />
      </li>
      <li class="line">
        <span class="text-title">联系手机：</span>
        <input
          type="text"
          placeholder="请输入联系手机（必须填写真实有效的手机号码）"
          class="input"
          v-model="user.phone"
        />
      </li>
    </ul>
    <div class="user-title">睡安宝使用人信息登记</div>
    <ul class="user-content">
      <li class="desc">
        <img
          src="../assets/images/add.png"
          alt=""
          style="width: 20px; height: 20px"
          class="icon"
          @click="add"
        />
        <!-- <img src="../assets/images/jian.png" alt="" class="icon" /> -->
        <span class="text" style="font-size: 12px"
          >有几个睡安宝就添加几个使用人,默认是一个使用人,如果是两个睡安宝就点击+号增加使用人2,进行填写使用人2的姓名联系手机、主机SN号、再拍照上传使用人2头像</span
        >
      </li>
      <template v-for="(uitem, index) in list">
        <li class="title-text" style="margin-top: 10px">
          使用人{{ index + 1 }}

          <template>
            <img
              @click="sub(uitem)"
              src="../assets/images/jian.png"
              alt=""
              style="width: 20px; height: 20px"
              class="icon"
              v-if="index != 0"
            />
          </template>
        </li>
        <li class="line">
          <span class="text-title">姓名：</span>
          <input
            type="text"
            placeholder="请输入使用人姓名"
            class="input"
            v-model="uitem.truename"
          />
        </li>
        <li class="line">
          <span class="text-title">联系手机：</span>
          <input
            type="text"
            placeholder="请输入使用人手机"
            class="input"
            v-model="uitem.phone"
          />
        </li>
        <li class="line">
          <span class="text-title">主机SN号：</span>
          <input
            type="text"
            placeholder="请输入睡安宝SN号码"
            class="input"
            v-model="uitem.code"
          />
        </li>
        <li class="font" style="font-size: 12px">
          (请打开睡安宝包装盒里拿出白色带USB线的主机背面标签上标有此主机SN号请准确输入)
        </li>
        <div class="upload">
          <div class="box" @click="up(index)">
            <van-uploader :after-read="afterRead" name="index">
              <div class="uploader-content">
                <img
                  src="../assets/images/avater.png"
                  alt=""
                  class="avater"
                  v-if="uitem.headimgurl == ''"
                />
                <img :src="uitem.headimgurl" alt="" class="avater" v-else />

                <button class="btn-upload">请上传照片</button>
              </div>
            </van-uploader>
          </div>
        </div>
      </template>
    </ul>

    <!-- 按钮 -->
    <button class="confirm" @click="submit">确定</button>
    <div class="copyright">
      <span> @2023</span>
      <span class="text">陕西大秦盛业科技有限责任公司</span>
      <span>版权所有</span>
    </div>
  </div>
</template>

<script>
import { Reg } from "../api/index";
import axios from "axios";
Array.prototype.remove = function (val) {
  var index = this.indexOf(val);
  if (index > -1) {
    this.splice(index, 1);
  }
};

export default {
  data() {
    return {
      input: "",
      index: 0,
      user: {
        truename: "",
        idcard: "",
        phone: "",
      },
      list: [
        {
          truename: "",
          phone: "",
          code: "",
          headimgurl: "",
        },
      ],
    };
  },
  methods: {
    up(e) {
      console.log("e", e);
      this.index = e;
    },
    afterRead(e) {
      console.log("e", e);
      var that = this;
      let formData = new FormData();
      formData.append("file", e.file);
      axios
        .post("/uploadimg", formData)
        .then((response) => {
          // 处理上传成功的逻辑
          console.log(response.data);

          var list = that.list;
          for (var i = 0; i < list.length; i++) {
            if (i == that.index) {
              list[i].headimgurl = response.data.data;
              break;
            }
          }

          that.list = list;
        })
        .catch((error) => {
          // 处理上传失败的逻辑
          console.error(error);
        });
    },
    add() {
      this.list.push({
        truename: "",
        phone: "",
        code: "",
        headimgurl: "",
      });
    },
    sub(uitem) {
      this.list.remove(uitem);
    },
    async submit() {
      if (this.user.truename == "") {
        this.$notify({ type: "danger", message: "请输入姓名" });
      } else if (this.user.idcard == "") {
        this.$notify({ type: "danger", message: "请输入身份证" });
      } else if (this.user.idcard.length != 18) {
        this.$notify({ type: "danger", message: "请输入正确的身份证号码" });
      } else if (this.user.phone == "") {
        this.$notify({ type: "danger", message: "请输入手机号" });
      } else if (this.user.phone.length != 11) {
        this.$notify({ type: "danger", message: "请输入正确的手机号" });
      } else if (this.list[0].truename == "") {
        this.$notify({ type: "danger", message: "请输入使用人1姓名" });
      } else if (this.list[0].phone == "") {
        this.$notify({ type: "danger", message: "请输入使用人1手机号" });
      } else if (this.list[0].phone.length != 11) {
        this.$notify({ type: "danger", message: "请输入使用人1正确的手机号" });
      } else if (this.list[0].code == "") {
        this.$notify({ type: "danger", message: "请输入使用人1SN号" });
      } else {
    
        this.user.list = JSON.stringify(this.list);
        var obj = await Reg(this.user);
        if (obj.status == 200) {
          this.$dialog.alert({
            message: obj.message,
          });
        } else {
          this.$dialog.alert({
            message: obj.message,
          });
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.register {
  width: 750px;
  padding-top: 50px;

  .title {
    width: 750px;
    text-align: center;
    line-height: 80px;
    font-size: 40px;
    font-weight: bold;
  }

  .content {
    .line {
      display: flex;
      justify-content: space-between;
      width: 590px;
      margin: 30px auto;
      align-items: center;

      .text-title {
        font-size: 26px;

        color: #666;
        font-weight: bold;
        display: block;
        width: 150px;
      }

      .input {
        width: 430px;
        height: 45px;
        font-size: 20px;
      }
    }
  }

  .user-title {
    color: #999;
    font-size: 39px;
    letter-spacing: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
  }

  .user-content {
    .title-text {
      color: #333;
      line-height: 80px;
      text-align: center;
      font-size: 33px;
    }

    .desc {
      display: flex;
      padding: 0 30px;

      .icon {
        width: 30px;
        height: 40px;
        margin-right: 10px;
      }

      .text {
        color: #999;
        font-size: 15px;
      }
    }

    .line {
      display: flex;
      justify-content: space-between;
      width: 590px;
      margin: 30px auto;
      align-items: center;

      .text-title {
        font-size: 26px;

        color: #666;
        font-weight: bold;
        display: block;
        width: 150px;
      }

      .input {
        width: 430px;
        height: 45px;
        font-size: 20px;
      }
    }

    .font {
      color: #999;
      font-size: 12px;
      text-align: center;
      margin: 30px 0;
      padding: 0 30px;
    }
  }

  .upload {
    width: 750px;
    display: flex;
    justify-content: center;
    align-items: center;

    .uploader-content {
      width: 138px;
      height: 138px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .avater {
        width: 138px;
        height: 138px;
      }

      .btn-upload {
        width: 160px;
        height: 51px;
        background-color: #11b7f6;
        color: #fff;
        font-size: 12px;
        font-weight: bold;
        margin: 20px 0;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .confirm {
    width: 450px;
    height: 60px;
    background-color: #12b8f6;
    color: #fff;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    margin: 30px auto;
    margin-top: 80px;
  }

  .copyright {
    color: #a8a8a8;
    font-size: 20px;
    font-weight: bold;

    text-align: center;

    .text {
      margin: 0 20px;
    }
  }
}
</style>